import React, { Component } from 'react';
import jsonp from 'jsonp';
import './Suggest.css';

/* 1.给input绑定输入值改变事件
2.获取input中的值，调用百度接口数据，并修改状态对象中words属性 */

export default class Suggest extends Component {
    constructor() {
        super();
        this.state = {
            words: [],
            index: -1,// 当前选中的索引
        };
    }

    handleChange = (e) => {
        let wd = e.target.value;
        // 缓存用户输入的关键字
        this.wd = wd;
        jsonp('http://www.baidu.com/su?wd=' + `${wd}`, {
            param: 'cb'
        }, (err, data) => {
            console.log(data);
            this.setState({ words: data.s });
        });
    }

    handleKeyDown = (e) => {
        let code = e.keyCode;
        // 向上 向下 enter搜索
        if (code ===38 || code === 40||code===13) {
            let index = this.state.index;
            if (code === 38) {
                index--;
                if (index === -2) {
                    index = this.state.words.length-1;
                }
            } else if (code === 40) {
                index++;
                if (index === this.state.words.length) {
                    index = -1;
                }
            }else if(code===13){
                window.location.href = 'http://www.baidu.com/s?wd=' + `${e.target.value}`;
            }
            this.setState({ index });
            console.log(this.state.index)
        }
    };

    render() {
        return (
            <div className="Container">
                <div className="Row">
                    <div className="col-sm-8 col-sm-offset-2">
                        <div className="panel panel-default">
                            <div className="panel-heading">
                                <input type="text" className="form-control"
                                    onChange={
                                        this.handleChange
                                    }
                                    onKeyDown={
                                        this.handleKeyDown
                                    }
                                    value={this.state.index === -1 ? this.wd : this.state.words[this.state.index]} />
                            </div>
                            <div className="panel-body">
                                <ul className="list-group">
                                    {this.state.words.map((word, index) => (
                                        <a href="javaScript:void(0);">
                                            <li key={index}
                                                className={"list-group-item " + (index === this.state.index ? 'active' : '')}
                                                onKeyDown={this.enter}  >
                                                {word}
                                            </li>
                                        </a>
                                    ))
                                    }
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
};